<template>
    <f7-page>
        <f7-navbar title="选择司机">

            <f7-subnavbar>
                <f7-segmented raised>
                  <f7-button class="active"  @click="getVerifyDriver">挂靠车辆</f7-button>
                  <f7-button class="active"  @click="getDriver(false)">平台推荐</f7-button>
                </f7-segmented>
            </f7-subnavbar>

        </f7-navbar>
        <div v-if='addType=="left"'>
            <div @click="showGroup(true, 'nogroup')">
                未分组({{driverList.verifyNoGroupCount}}) <span></span>
            </div>
            <div v-show="showFlag['nogroup']" v-for="x,k in driverList.verifyNoGroup">
                <div v-if='k==0' @click="seleAll('verify_driver', groupList)"> 全选 </div>
                <input type="checkbox" :value="x._id" @click="selDriver('verify_driver',x._id)">
                <label>
                    车头照: {{x.jia_shi_zheng_url}}
                   车牌号: {{x.truck_num}}
                   载重:  {{x.truck_weight}}
                   是否挂靠:    {{x.recommend}}
                   是否上线:    {{x.newLogin}}
                   是否有合适线路: {{x.lines.length}}
                   司机头像:    {{x.photo_url}}
                   司机姓名:    {{x.real_name}}
               </label>
            </div>
        </div>

<hr/>
{{verify_driver}}
        <div v-if='addType=="left"'>
            <div v-for="x in driverGroup">

                <div @click="showGroup(true, x._id)">
                    组名: {{x.name}} ({{x.count}})
                </div>
                <div v-show="showFlag['group_'+x._id]" v-for="y,k in groupList">
                    <div v-if='k==0' @click="seleAll('verify_driver', groupList)"> 全选 </div>
                    <input type="checkbox" :value="y._id" :checked="verify_driver.indexOf(y._id) == -1 ? '' : 'checked' " @click="selDriver('verify_driver',y._id)">
                    <label >
                        车头照: {{y.jia_shi_zheng_url}}
                       车牌号: {{y.truck_num}}
                       载重:  {{y.truck_weight}}
                       是否挂靠:    {{y.recommend}}
                       是否上线:    {{y.newLogin}}
                       是否有合适线路: {{y.lines.length}}
                       司机头像:    {{y.photo_url}}
                       司机姓名:    {{y.real_name}}
                   </label>

                </div>
            </div>
        </div>
        <hr/>
        <div v-if='addType=="right"'>
            <div v-show="showFlag['nogroup']" v-for="x,k in driverList.verifyNoGroup">
                <div v-if='k==0' @click="seleAll('platform_driver', groupList)"> 全选 </div>
                <input type="checkbox" :value="x._id" @click="selDriver('platform_driver',x._id)">
                <label >
                    车头照: {{x.jia_shi_zheng_url}}
                   车牌号: {{x.truck_num}}
                   载重:  {{x.truck_weight}}
                   是否挂靠:    {{x.recommend}}
                   是否上线:    {{x.newLogin}}
                   是否有合适线路: {{x.lines.length}}
                   司机头像:    {{x.photo_url}}
                   司机姓名:    {{x.real_name}}
               </label>
            </div>
        </div>



    </f7-page>
</template>

<script>
    export default {
        name: "selectDriver",
        data: function(){
            return {
                driverList: {
                    verifyNoGroup: '',
                    verifyNoGroupCount: 0,
                    noVerifyList:''
                },
                groupList:'',
                showFlag: {},
                addType: 'left',
                verify_driver: [],
                platform_driver:[],
                driverGroup:''

            }
        },
        methods:{
            async getDriver(verify, group_id){
                if(!verify){
                    this.addType='right';
                }
                let param={
                    page:1,
                    receive_city
                        :
                        "北京",
                    receive_district
                        :
                        "东城区",
                    receive_province
                        :
                        "北京",
                    send_city
                        :
                        "北京",
                    send_district
                        :
                        "东城区",
                    send_province
                        :
                        "北京",
                    verify: verify
                }
                if(group_id){
                    param.group_id=group_id;
                }

                let drivers = (await this.LineService.getDriver(param)).data.data;

                if(group_id){
                    this.groupList=drivers;
                }else{
                    this.driverList['verifyNoGroupCount']=drivers.length;
                    this.driverList['verifyNoGroup']=drivers
                }

            },
            async getDriverGroup(){

                 this.driverGroup = (await this.mineService.getListGroup({type: "DRIVER"})).data.data;
                 for(let i of this.driverGroup){
                        if(i._id){
                            this.showFlag['group_'+i._id]=false;
                        }
                    }
            },
            getVerifyDriver(){
                this.addType='left';
                if(!this.driverList.verifyNoGroup){
                    this.getDriver(true);
                }
                this.getDriverGroup();
            },
            showGroup(flag, group_id){
                // 单击组 是显示与隐藏

                if(group_id=='nogroup'){

                    this.showFlag['nogroup'] = !this.showFlag['nogroup']
                    this.getDriver(flag);
                }else{

                    this.showFlag['group_'+group_id] = !this.showFlag['group_'+group_id]
                    this.getDriver(flag, group_id);
                }
            },
            selDriver(x,y){
                // x: this下的参数, y: 司机id
                if(this[x].indexOf(y) == -1){
                    this[x].push(y)
                }else{
                    this[x].splice(this[x].indexOf(y) , 1);
                }
            },
            seleAll(x, group){
                // x: this下的参数
                for(let i of group){
                    if(i._id){

                        if(this[x].indexOf(i._id) == -1){
                            this[x].push(i._id)
                        }else{
                            this[x].splice(this[x].indexOf(i._id) , 1);
                        }
                    }
                }
            }
        },
        mounted(){
            this.getDriver(true);
            this.getDriverGroup();
        }
    }
</script>

<style scoped>
  .active {
    color: #000 !important;
    font-weight: bold !important;
  }
</style>
